<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1, user-scalable=no" />
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="apple-mobile-web-app-status-bar-style" content="black" />
    <title>搜索</title>
    <link rel="stylesheet" href="../css/mui.min.css">
    <script src="../js/mui.min.js"></script>
    <!--App自定义的css-->
    <link rel="stylesheet" type="text/css" href="../css/app.css" />
    <link rel="stylesheet" href="../npl/css/vant.mini.css" />
    <script src="../js/vue.js"></script>
    <script src="../js/jquery-3.6.0.min.js"></script>
    <script src="../js/sm2.js"></script>
    <script src="../js/vconsole.min.js"></script>
    <script src="../js/sm3.js"></script>
    <!-- <script src="../js/feedback.js"></script> -->
    <script src="../js/clipboard.js"></script>
    <script src="../js/flexible.js"></script>
    <script src="../wx/uap.js"></script>
    <script src="../npl/js/vant.mini.js"></script>
    <script src="./text.js" type="text/javascript"></script>
</head>
<style>
    #app {
        width: 100%;
        height: 100%;
        /* height: calc(100% + 0.8rem - env(safe-area-inset-bottom)) */
        height: calc(100% - constant(safe-area-inset-bottom));
        height: calc(100% - env(safe-area-inset-bottom));
        display: flex;
        padding: 0 .3rem;
        flex-direction: column;
        overflow: hidden;
        background-image: url("../image/back_home.png");
        background-size: 100%;
    }

    .van-nav-bar__left,
    .van-nav-bar__right {
        position: relative;
    }

    .van-nav-bar {

        background: none !important;
    }

    .van-nav-bar__content {
        display: flex;
        justify-content: space-between;
    }

    .van-nav-bar__title {
        margin-left: -5px;
        flex: 1;
        max-width: none
    }

    .van-search {
        padding: 0;
        height: 100%;
        /* background: none; */
    }

    .van-search__content {
        padding: 0;
        background: none;
    }

    input[type=search] {
        height: 100%;
        font-size: 14px;
        margin: 0px;
        line-height: 0px;
        padding-left: 3px;
        background-color: #fff;
    }

    .van-field__left-icon .van-icon,
    .van-field__right-icon .van-icon {
        display: none;
    }

    .van-field__left-icon {
        width: .4rem;
        height: .4rem;
        background-image: url("../image/search.png");
        background-repeat: no-repeat;
        background-size: 100% 100%;
        z-index: 999;
        margin: 0 5px 0 3px;
    }

    .van-search .van-cell {
        justify-content: center;
        align-items: center;
        background-color: rgba(255, 255, 255, 0.8);
        border-radius: 34px;
    }

    .van-search {
        font-size: 14px;
        font-weight: 300;
        height: 35px;
        margin: 0 5px;
        background-color: rgba(255, 255, 255, 0.8);
        border-radius: 34px;
    }

    .van-search__action {
        height: 28px;
        text-align: center;
        line-height: 28px;
        color: #fff;
    }

    .search {
        width: 50px;
        height: 100%;
        background-color: #5f84f7;
        border-radius: 30px;
    }

    .search_list {
        flex: 1;
        overflow-y: scroll;
    }

    .List_wrapper {
        background-color: #fff;
        border-radius: 15px;
        width: 100%;
        position: relative;
        padding: 0 10px;
        margin-bottom: .2rem;
        display: flex;
        justify-content: space-between;
        align-items: center;
        height: 1.8rem;
    }

    .List_wrapper1 {
        /* background-color: pink; */
        width: 100%;
        padding: 0 10px;
        display: flex;
        justify-content: space-around;
        align-items: center;
        height: 70px;
    }

    .list_img {
        width: 50px;
        height: 50px;
    }

    .list_img img {
        width: 100%;
        height: 100%;
    }

    .listBox {
        display: flex;
        align-items: center;

    }

    .listBtn {
        width: 50px;
        height: 25px;
        font-size: 13px;
        font-weight: 500;
        text-align: center;
        color: #fff;
        line-height: 25px;
        background-color: #5f84f7;
        border-radius: 30px;
        position: absolute;
        right: .18rem;
        /* top: .1rem; */

    }

    .listText {
        margin-left: 10px;
        color:#000;
  font-weight: bold;
  font-size: 16px;
    }
    .listText1 {
        margin:3px 0 0 10px;
        opacity:60%;
        coloR:rgb(105, 102, 102);
  font-size: 12px;
    }

    .textBox {
        position: relative;
        margin-top: 15px;
        display: flex;
        flex-direction: column;
        /* background: #fff; */
        /* border-bottom: 2px solid #222 */
    }

    .first_span_text {
        font-weight: 600;
        font-size: 15px;
        color: #1e3754;
        position: absolute;
        left: 7%;
        top: 30%;
    }

    .first_span {
        width: 3px;
        border-radius: 20% 20%;
        display: inline-block;
        height: 15px;
        background: rgb(95, 132, 247);
        position: absolute;
        top: 20%;
        left: 4%;
    }

    .text_title {
        height: 20px;
        margin: 0 0 10px;
        display: flex;
        justify-content: space-between;
        padding: 0% 10px 0 0;
        position: relative;
    }
    .text_title1 {
        height: 20px;
        margin: 0 0 10px;
        display: flex;
        justify-content: space-between;
        padding: 0% 10px 0 0;
        position: relative;
    }

    .more img {
        width: 14px;
        height: 14px;
    }

    .record {
        max-height: 85px;
        overflow: auto;
        display: flex;
        width: 100%;
        flex-wrap: wrap;
        padding: 0 5px;
    }

    .record p {
        background-color: rgba(45, 52, 60, 0.15);
        border-radius: 24px;
        padding: 3px;
        padding: 5px 10px;
        display: flex;
        margin: 2% 2%;
        align-items: center;
        justify-content: center;
        opacity: 60%;
        color: #2d343c;
        font-size: 12px;
    }
    .van-empty {
    margin-top:10%;
    }
    
.card_b{
    display: flex;
  padding:0 .1rem .1rem;

}
.card_b p{
    color: #000;
    min-width: 38px;
    text-align: center;
    margin-right: 5px;
    border-radius: 15px;
    font-size: 10px;
    padding: 0px 5px;
    background-color: #F6F7F9;
}
</style>

<body>
    <div id="app">
        <div class="is-loading">
            <div class="is-loading">
                <div class="curtain">
                    <div class="loadingBgc">
                        <div class="loader"></div>
                    </div>
                </div>
            </div>
        </div>
        <div class="header_tit">
            <van-nav-bar >
                <template #title>
                        <!-- <form action="/"> -->
                            <van-search v-model="content" placeholder="请输入搜索关键词" @input="onSearch">
                                <template #action>
                                   <!-- <div class="search" @click="onSearch">搜索</div> -->
                                </template>
                            </van-search>
                        <!-- </form> -->
                </template>
                <template #right>
                    <div class="back_r" @click="home">取消</div>
                </template>
            </van-nav-bar>
        </div>
        <div class="search_list">
            <div v-if="List && content !=''" class="List_wrapper" v-for="(item,index) in cardList">
                <div class="listBox">
                    <div class="list_img">
                        <img :src="item.img" alt="">
                    </div>
                    <div style="margin-left: 10px;">
                        <p class="listText" v-html="brightenKeyword(item.title,content)"></p>
                        <p class="listText1" v-text="item.text"></p>
                        <div class="card_b">
							<p v-for="i in item.children" v-if="item.show" v-text="i.text"></p>
						</div>
                    </div>
                </div>
                <p @click="user(item.url)" class="listBtn">使用</p>
            </div>
            <div v-if="cardList.length == 0 && content !=''" class="List_wrapper1">
                <van-empty  :image="emptyImgSearch" description="未获取到相关应用" />
            </div>
        </div>
    </div>
    <script>
        new Vue({
            el: '#app',

            data() {
                let jsApiList = [];
                $.getScript("../js/jweixin-sgccigw-1.0.0.js" /*"js/jweixin-1.0.0.js"*/ , function () {
                    'use strict';
                    wx.ready(function () {});
                    jsApiList = [
                        'startRecordVoiceBuffer',
                        'onRecordBufferReceived',
                        'stopRecord',
                    ];
                    wx.config({
                        beta: true, // 调用wx.invoke形式的接口值时，该值必须为true。
                        debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
                        appId: appid, // 必填，政务微信的cropID
                        timestamp: '1626832073', // 必填，生成签名的时间戳
                        nonceStr: nonceStr, // 必填，生成签名的随机串
                        signature: 'fb9f560a9b4824f7db3525926994010de74ea055', // 必填，签名，见附录1
                        jsApiList: jsApiList // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
                    });
                });
                // })
                return {
                    content: '',
                    emptyImgSearch:"../image/empty-image-search.png",
                    List: [],
                  	cardList:[]
                }
            },
            mounted() {
            },
            methods: {

                brightenKeyword(val, editKeyword) {
                    const Reg = new RegExp(editKeyword);
                    if (val) {
                        const res = val.replace(Reg, `<span style="color: #5f84f7;;">${editKeyword}</span>`);
                        return res;
                    }
                },
                user(url) {
                    $(location).attr("href", url);
                },

                onSearch(val) {
                    if(!val) return
                    this.content = val
                    // $(".curtain").css("display", "block");
                    userId = sessionStorage.getItem("userId");
                   iscp_port = sessionStorage.getItem("iscp_port") || "";
                    const timestamp = new Date().getTime() + ""
                    let data = {
                        "userId": userId,
                        "timestamp":timestamp,
                        "content": this.content,
                    };
                    data = JSON.stringify(data)
                    let sign = sm3(data);
                    let AuthenticationSession = sessionStorage.getItem("Authentication");
                        $.ajax({
                            url: localUrlLink + iscp_port + "/tjAiAssistant/aiSysRes/searchMenus",
                            type: "post",
                            // async: true, //是否同步，false表示同步请求
                            dataType: "json",
                            data: data,
                            headers: {
                                "Content-Type": "application/json;charset=UTF-8",
                                Authentication: AuthenticationSession,
                                sign: sign,
                                timestamp: timestamp
                            },
                            success: (res, txt, xhr) => {
                                if (sm3(res.resultValueStr) == xhr.getResponseHeader("sign")) {
                                    let Authentication = xhr.getResponseHeader("Authentication")
                                    if (res.code == 200) {
                                        if (Authentication) {
                                            $(".curtain").css("display", "none");
                                            sessionStorage.setItem("Authentication", Authentication);
                                            this.cardList = res.resultValue.filter(item => item.id != 12);
                                        }
                                    } else if (res.code == 500) {
                                        $(".curtain").css("display", "none");
                                        mui.toast(res.resultValue, {
                                            duration: 'long',
                                            type: 'div'
                                        })
                                    } else {
                                        $(".curtain").css("display", "none");
                                        mui.toast('请求异常,请稍后再试!', {
                                            duration: 1000,
                                            type: 'div'
                                        })
                                    }
                                } else {
                                    $(".curtain").css("display", "none");
                                    mui.toast('完整性校验失败', {
                                        duration: 1000,
                                        type: 'div'
                                    })
                                }
                            },
                            error: (e) => {
                                $(".curtain").css("display", "none");
                                mui.toast('请求异常,请稍后再试', {
                                    duration: 1000,
                                    type: 'div'
                                })
                            },
                        });
                },
                home() {
                    $(location).attr("href", "Home.html");
                },
                close() {
                    if (!isFlag) {
                        closeIscp();
                    }
                    // WeixinJSBridge.call("closeWindow");
                    IscLogout()
                    wx.closeWindow();
                },


            }
        })
    </script>
</body>

</html>